<template>
  <div>
    <div>
      <div class="backBtn" @click="$router.back(-1)">
        <i class="icon iconfont icon-back"></i>
      </div>
      <div class="wrapper bg_1">
        <span class="shareGuide"
          ><i class="icon iconfont icon-zhiyin"></i
        ></span>
        <!-- <div class="nickBox">
          <div class="nickInfo">
            <span class="imgBox"><img :src="datainfo.headImg" alt=""/></span
            ><span>{{ datainfo.nickName }}</span>
          </div>
          <span class="nickTitle">邀您开通VIP</span>
        </div> -->
        <div class="qrcodeBox">
          <!-- <img
            src=""
          /> -->
          <div class="qrcode" ref="qrCodeUrl"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { MemberBaseInfoUrl } from "@/api/axiosFun";
import QRCode from 'qrcodejs2'
export default {
  name: "qrcodeVipTuijian",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      datainfo:{}
    };
  },
  mounted() {
    //this.init();
    this.creatQrCode();
  },
  methods: {
    init() {
      MemberBaseInfoUrl().then(res=>{
            console.log(res);
           if(res.data.errCode == 0){
               this.datainfo = res.data.data;
           }
        },error=>{
            Toast(res.data.errMsg);
            return
        })
    },
    creatQrCode() {
        var qrcode = new QRCode(this.$refs.qrCodeUrl, {
            text: "http://ui.lehuichengshi.com/Register99", // 需要转换为二维码的内容
            width: 160,
            height: 160,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
        })
    },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.backBtn {
  width: 1.25rem;
  height: 1.25rem;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(rgba(0, 170, 255, 0.5)),
    to(rgba(0, 133, 255, 0.5))
  );
  background: linear-gradient(
    90deg,
    rgba(0, 170, 255, 0.5),
    rgba(0, 133, 255, 0.5)
  );
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-line-pack: center;
  align-content: center;
  position: fixed;
  top: 0.44rem;
  left: 0.44rem;
  z-index: 9999;
  border-radius: 50%;
  overflow: hidden;
}
.wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-clip: content-box;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-origin: content-box;
  font-size: 0.36rem;
  color: #fff;
}
.wrapper.bg_1 {
  background-image: url(/static/img/img_vip.jpg);
}
.wrapper .shareGuide {
  width: 0.6rem;
  height: 0.6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 0.7rem;
  color: hsla(0, 0%, 100%, 0.6);
  position: absolute;
  top: 0.1rem;
  right: 0.6rem;
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.wrapper .shareGuide i {
  font-size: inherit;
}
.nickBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-line-pack: center;
  align-content: center;
  text-align: center;
  padding: 0.1rem 0.3rem;
  font-size: 0.28rem;
  margin: 0.6rem 0;
}
.nickBox .nickInfo {
  color: #fff;
  padding-bottom: 0.2rem;
}
.nickBox .nickInfo span {
  font-size: 0.36rem;
}
.nickBox .nickInfo .imgBox {
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  border: 2px solid #fff;
  overflow: hidden;
  margin-bottom: 0.2rem;
}
.nickBox .nickInfo .imgBox img {
  width: 100%;
}
.nickBox .nickInfo span {
  font-size: 0.36rem;
}
.nickBox .nickTitle {
  display: block;
  font-size: 0.42rem;
  line-height: 0.4rem;
  color: #fff;
  font-weight: 700;
  padding: 0.1rem 0 0.05rem;
  letter-spacing: 2px;
}
.qrcodeBox {
  text-align: center;
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  width: 5rem;
  height: 5rem;
  margin-left: -2.5rem;
  border-radius: 0.5rem;
}
.qrcodeBox img {
  width: 100%;
  opacity: 0.9;
  border-radius: 0.5rem;
}
.qrcode{
    display: inline-block;
}    
.qrcode img {
    width: 132px;
    height: 132px;
    background-color: #fff;
    padding: 6px; 
    box-sizing: border-box;
}
</style>
